{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
    .rights_interests {
        line-height: 13px;
    }
    .layui-form-item{
        display: flex;
        justify-content: flex-end;
    }
    .search-input{
        margin-right: 0 !important;
    }
	.layui-table-view .layui-table td, .layui-table-view .layui-table th{
		text-align: center;
	}
	.table-title .title-pic{
		width: 100%;
		height: 100%;
		margin-left: 0;
	}
	.layui-table .table-btn{
		text-align: center;
		display: block;
	}
</style>
{/block}
{block name="main"}
<div class="screen layui-collapse" lay-filter="selection_panel">
    <div class="layui-colla-content layui-form layui-show">
        <div class="layui-form-item">
            <div class="layui-inline search-input">
                <label class="layui-form-label">兑换码：</label>
                <div class="layui-input-inline search-input">
                    <input type="text" name="search_text" placeholder="请输入兑换码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <!-- <button class="layui-btn" lay-submit lay-filter="search">筛选</button> -->
                    <button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
                        <i class="layui-icon">&#xe615;</i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-tab table-tab" lay-filter="manjian_tab">
    <div class="layui-tab-content">
        <!-- 列表 -->
        <table id="poster_list" lay-filter="poster_list"></table>
    </div>
</div>
<script type="text/html" id="time">
    <div class='rights_interests'>
        {{# if(d.create_time){ }}
        <p><span>生成时间：{{ns.time_to_date(d.create_time)}}</span></p><br/>
        {{# } }}
        {{# if(d.activation_time){ }}
        <p><span>激活时间：{{ns.time_to_date(d.activation_time)}}</span></p><br>
        {{# } }}
        {{# if(d.use_time){ }}
        <p><span>使用时间：{{ns.time_to_date(d.use_time)}}</span></p>
        {{# } }}
    </div>
</script>
<script type="text/html" id="rights_interests">
    <div class='rights_interests' style="margin-top: 13px;">
        <p><span>积分：{{d.point}}</span></p><br>
        <p><span>余额：{{d.balance}}</span></p><br>
    </div>
</script>
<script type="text/html" id="poster_status">
    <div class='table-title'>
        {{# if(d.entity_status == 0){ }}
        <div class='title-pic'>未激活</div>
        {{# }else if(d.entity_status == 1){ }}
        <div class='title-pic text-color'>待使用</div>
        {{# }else if(d.entity_status == 2){ }}
        <div class='title-pic'>已作废</div>
        {{# }else if(d.entity_status == 3){ }}
        <div class='title-pic'>已使用</div>
        {{# }else if(d.entity_status == 4){ }}
        <div class='title-pic'>已过期</div>
        {{# } }}
    </div>
</script>
<!-- 操作 -->
<script type="text/html" id="operation">
    <div class="table-btn">
        {{# if(d.entity_status==0){ }}
        <a class="layui-btn" lay-event="start">激活</a>
        <a class="layui-btn" lay-event="close">作废</a>
        {{# }else if(d.entity_status==1){ }}
        <a class="layui-btn" lay-event="close">作废</a>
        {{# } }}
    </div>
</script>
{/block}
{block name="script"}
<script>
    var laytpl;
    var id = {:input('id', 0)};
    layui.use(['form', 'laytpl'], function () {
        var table,
            form = layui.form,
            repeat_flag = false; //防重复标识
        form.render();

        laytpl = layui.laytpl;
        table = new Table({
            elem: '#poster_list',
            url: ns.url("giftcard://shop/giftcard/recordlist"),
            where: {
                id: id
            },
            cols: [
                [{
                        field: 'LAY_INDEX',
                        title: '序号',
                        unresize: 'false',
                        width: '7%',
                        templet: function (data) {
                            return data.LAY_INDEX;
                        }
                    },
                    {
                    field: 'entity_bianhao',
                    title: '卡编号',
                    unresize: 'false',
                    width: '10%',
                }, {
                    // field: 'carmichael_text',
                    title: "<a onclick='hideorview()'>兑换码 <i id='hideorview' class='iconfont iconguanbi-yanjing'></i></a>",
                    unresize: 'false',
                    width: '10%',
					templet:function(data){
						var obj = $("#hideorview");
						if(obj.hasClass('iconguanbi-yanjing')){
							return '<span class="ceshi" data-index="'+data.carmichael_text+'">*********</span>';
						}else{
							let txt = data.carmichael_text;
							return '<span class="ceshi" data-index="**********">'+data.carmichael_text+'</span>';
						}
					},
                }, {
                    field: 'username',
                    title: '使用人',
                    unresize: 'false',
                    width: '12%',
                }, {
                    title: '兑换权益',
                    unresize: 'false',
                    width: '10%',
                    templet: '#rights_interests'
                }, {
                    title: '时间',
                    unresize: 'false',
                    width: '15%',
                    templet: '#time'
                }, {
                    field: 'status',
                    title: '状态',
                    unresize: 'false',
                    width: '12%',
                    templet: '#poster_status'
                }, {
                    title: '操作',
                    toolbar: '#operation',
                    unresize: 'false',
				    align:'right'
                }]
            ]
        });
        /**
         * 监听工具栏操作
         */
        table.tool(function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'close': //关闭
                    close(data.id);
                    break;
                case 'start': //启用
                    start(data.id);
                    break;
            }
        });

        /**
         * 关闭
         */
        function close(id) {
            if (repeat_flag) return false;
            repeat_flag = true;
            layer.confirm('确定作废吗?', {
                btn: ['确定', '取消'] //按钮
                , cancel: function (index, layero) {
                    repeat_flag = false;
                }
            }, function () {
                $.ajax({
                    url: ns.url("giftcard://shop/giftcard/editrecordstatus"),
                    data: {
                        id: id, entity_status: 2
                    },
                    dataType: 'JSON',
                    type: 'POST',
                    success: function (res) {
                        layer.msg(res.message);
                        repeat_flag = false;
                        if (res.code == 0) {
                            table.reload();
                        }
                    }
                }, function () {
                    repeat_flag = false;
                });
            });
        }

        /**
         * 开启
         */
        function start(id) {
            if (repeat_flag) return false;
            repeat_flag = true;

            layer.confirm('确定激活吗?', {
                btn: ['确定', '取消'] //按钮
                , cancel: function (index, layero) {
                    repeat_flag = false;
                }
            }, function () {
                $.ajax({
                    url: ns.url("giftcard://shop/giftcard/editrecordstatus"),
                    data: {
                        id: id, entity_status: 1
                    },
                    dataType: 'JSON',
                    type: 'POST',
                    success: function (res) {
                        layer.msg(res.message);
                        repeat_flag = false;
                        if (res.code == 0) {
                            table.reload();
                        }
                    }
                });
            }, function () {
                repeat_flag = false;
            });
        }

        form.on('submit(search)', function (data) {
            table.reload({
                page: {
                    curr: 1,
                    id: id
                },
                where: data.field
            });
        });
    });
    function hideorview(data){
        var obj = $("#hideorview");
        // $("table tr").each(function(i){
        //     if(i!=0){
        //         // console.log($(this).children('1'));
        //     }
        // });
        if(obj.hasClass('iconguanbi-yanjing')){
            obj.removeClass('iconguanbi-yanjing');
            obj.addClass('iconreview');
			$('.ceshi').each(function(index,val){
				var old = $(this).text();
				$(this).text($(this).data('index')).data('index',old)
			})
        }else{
            obj.removeClass('iconreview');
            obj.addClass('iconguanbi-yanjing');
			$('.ceshi').each(function(index,val){
				var old = $(this).text();
				$(this).text($(this).data('index')).data('index',old)
			})
        }
    }
    function add() {
        location.href = ns.url("giftcard://shop/giftcard/addgiftcard");
    }
</script>

{/block}